<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" type="text/css" href="../static/css/htshouye.css"/>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8"
            src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
    <style type="text/css">
        .minMenu1 {
            display: block;
        }

        .content {
            overflow: hidden;
            min-height: 100%;
            height: auto;
            position: relative;
        }

        .contentA {
            width: 280px;
            margin-top: 28px;
            margin-left: 30px;
            display: inline-block;
        }

        .contentA > a {
            color: rgb(198, 194, 194);
            font-size: 15px;
        }

        .contentA > span {
            color: rgb(198, 194, 194);
        }

        label {
            margin-right: 50px;
            width: 235px;
            height: 35px;
            float: right;
            margin-top: -25px;
            margin-bottom: 10px;
        }

        label > input {
            width: 158px;
            height: 26px;
            border: 1px solid black;
            text-indent: 10px;
        }

        label > input::-webkit-input-placeholder {
            text-indent: 10px;
        }

        #example,
        #example td {
            border: 1px solid rgb(180, 180, 180);
            text-align: center;
            height: 25px;
            line-height: 25px;
            font-size: 13px;
        }

        #example {
            width: 94% !important;
            margin-left: 2% !important;
            margin-top: 30px !important;
        }

        #example td {
            padding: 9px 5px;
        }

        #example tr:nth-child(even) {
            background: rgb(220, 220, 220);
        }

        #example button {
            width: 24%;
            height: 30px;
            line-height: 29px;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            margin-right: 10px;
            margin-left: 10px;
            font-size: 12px;
            background-color: rgb(24, 166, 137);
            border-color: transparent;
            color: white;
        }

        .box-min {
            width: 100%;
            height: 98%;
            background-color: transparent;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 887;
            display: none;
        }

        /* 修改信息 */
        .amend1 {
            width: 45%;
            height: 300px;
            background-color: rgb(220, 220, 220);
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
            z-index: 888;
            text-align: center;
            padding-top: 65px;
            border-radius: 10px;
        }

        .amend1 > li {
            height: 40px;
            line-height: 40px;
            margin-bottom: 15px;
        }

        .amend1 > li > input {
            width: 300px;
            margin-left: 20px;
            height: 35px;
            line-height: 35px;
        }

        .amend1 > button {
            width: 72px;
            height: 36px;
            line-height: 35px;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            margin-left: 65px;
            margin-top: 35px;
        }

        .addBtn {
            background-color: #009688;
            border-color: transparent;
            color: white;
            margin-left: -15px !important;

        }

        .removeBtn {
            background-color: rgb(236, 71, 88);
            border-color: transparent;
            color: white;
            margin-left: 15px;
        }

        .input1 {
            margin-left: 32px !important;
        }

        .A2none {
            display: none;
        }

        .success1 {
            width: 180px;
            height: 50px;
            line-height: 50px;
            background-color: #009688;
            color: white;
            text-align: center;
            border-radius: 8px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            display: none;
        }
    </style>
</head>
<body>
<!-- 头部   -->
<div class="boxMax">
    <div class="title">
        <a href="qdst.html">堇夏年华</a>
        <div class="titleRight">
            <img src="../static/img/tx.png"/>
            <span class="arrowDown yhm">用户名</span>
            <div class="titleNone">
                <ul>
                    <li><a href="dr.html">退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 左侧导航栏  -->
    <ul class="menu">
        <li>
            <img src="../static/img/qdsrc.png" alt=""/>
            <span class="menuSpan menuSpan2">主页</span>
            <ul class="minMenu minMenu1">
                <li><a href="walker">hacker-walker</a></li>
                <li><a href="qdst.html">黑客帝国walker</a></li>
            </ul>
        </li>
        <li>
            <img src="../static/img/hysrc.png" alt=""/>
            <span class="menuSpan">权限管理</span>
            <ul class="minMenu">
                <li><a href="yhlb.html">用户管理</a></li>
                <li><a href="jslb.html">角色管理</a></li>
            </ul>
        </li>
        <li>
            <img src="../static/img/ygsrc.png" alt=""/>
            <span class="menuSpan">系统管理</span>
            <ul class="minMenu ">
                <li><a href="xtlb.html">系统列表</a></li>
            </ul>
        </li>
    </ul>
    <!-- 主体内容 -->
    <div class="content">
        <div class="contentA">
            <a href="htsy.html">首页</a>&nbsp;
            <span> / </span>&nbsp;
            <a href="qxgl.html">权限管理</a>&nbsp;
            <span> / </span>&nbsp;
            <a href="xtgl.html">系统管理</a>
        </div>
        <table cellspacing="0" class="stTable" id="example">
            <thead>
    <!--  所占百分比 -->
            <tr>
                <td width="10%">用户ID</td>
                <td width="15%">登陆名称</td>
                <td width="15%">用户名名称</td>
                <td width="10%">用户状态</td>
                <td width="20%">创建时间</td>
                <td width="30%">操作</td>
            </tr>
            </thead>
        </table>
    </div>
    <div class="box-min">
        <ul class="amend1">
            <li><span>用户ID</span><input type="text" class="input1" disabled="disabled"></li>
            <li><span>登陆名称</span><input type="text" class="input2"></li>
            <li><span>用户名名称</span><input type="text" class="input3"></li>
            <li><span>用户状态</span><input type="text" class="input4"></li>
            <button class="addBtn">确认修改</button>
            <button class="removeBtn">取消</button>
        </ul>
    </div>
    <div class="success1">复制成功</div>
</div>

<script type="text/javascript">
    var x = document.cookie;
    var yhm = x.split(";")[0].split("=")[1];
    console.log(x)
    console.log(yhm);
    $('.yhm').html(yhm);


    $('.titleRight').mouseenter(function () {
        $('.titleNone').css({
            display: "block"
        })
    })
    $('.titleRight').mouseleave(function () {
        $('.titleNone').css({
            display: "none"
        })
    })
    $('.menuSpan').click(function () {
        var notA = $(this).next();
        $('.menuSpan').not(this).removeClass('menuSpan2');
        $('.minMenu').not(notA).hide(500);
        $(this).toggleClass('menuSpan2');
        $(this).next().toggle(500);
    })

    //表格
    $('#example').DataTable({
        bAutoWidth: false,//自动宽度
        bDeferRender: true,//延迟渲染
        lengthChange: false,//控制是否可以改变每页数据量
        retrieve: true,
        "oLanguage": {//插件的汉化
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "抱歉， 没有找到",
            "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
            "sInfoEmpty": "没有数据",
            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "前一页",
                "sNext": "后一页",
                "sLast": "尾页"
            },
            "sZeroRecords": "没有检索到数据",
            "sProcessing": "<img src='' />",
            "sSearch": "搜索"
        },
            //显示当前账户的信息
        //     ajax: {
        //         url: '/api/channel/findByStatus/1',
        //         type: 'POST',
        //         data: JSON.stringify({status: 1, registerDate: sj1}),
        //         dataSrc: ''
        //     },
        //     columns: [{
        //         data: 'id'
        //     }, {
        //         data: 'name'
        //     }, {
        //         data: 'price'
        //     }, {
        //         data: 'channel_money'
        //     }, {
        //         data: 'register_num'
        //     }, {
        //         data: 'user_id'
        //     }
        //     ],
        //     columnDefs: [{
        //         targets: 8,
        //         render: function (data, type, row, meta) {
        //             return '<button class="xgBtn" onclick = "xgBtn1(this)">修改信息</button><button onclick = "fzBtn(this)">复制链接</button><button class="rBtn" onclick = "jyBtn(this)">禁用渠道</button>';
        //         }
        //     },
        //         {"orderable": false, "targets": 8},
        //     ],
    });

    // 修改信息
    function xgBtn1(this1) {
        $('.box-min').slideToggle(400);
        var Row1 = $(this1).parents('tr').eq(0);
        var sz1 = $("#example").dataTable().fnGetData(Row1);
        $('.input1').val(sz1.id);
        $('.input2').val(sz1.name);
        $('.input3').val(sz1.price);
        $('.input4').val(sz1.staus);
    }

    $('.removeBtn').click(function () {
        $('.box-min').slideUp(400);
    })
    $('.addBtn').click(function () {
        var qdID = $('.input1').val();
        var qdName = $('.input2').val();
        var qdMoney = $('.input3').val();
        var qdMoney = $('.input4').val();
        $.ajax({
            type: "post",
            url: "/api/channel/save",
            data: JSON.stringify({id: qdID, name: qdName, price: qdMoney,staus:Staus}),
            asasync: true,
            cache: false,
            contentType: 'application/json',
            success: function (e) {
                alert('修改成功');
                window.location.href = "qdst";
            }
        })
    })


</script>
</body>
</html>
